<template>
  <view class="content">
    <!-- 轮播图 -->
    <swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
      <swiper-item v-for="(item, index) in bannerList" :key="index" @tap="handleBannerClick(item)">
        <image :src="item.imageUrl" class="swiper-image" mode="aspectFill" />
      </swiper-item>
    </swiper>

    <!-- 搜索框 -->
    <view class="search-box">
      <uni-icons class="search-icon" type="search" size="20" color="#999999" />
      <input
        class="search-input"
        type="text"
        v-model="searchKeyword"
        placeholder="搜索产品名称"
        placeholder-class="placeholder"
        @input="handleSearch"
      />
      <uni-icons
        v-if="searchKeyword"
        class="clear-icon"
        type="clear"
        size="20"
        color="#999999"
        @click="clearSearch"
      />
    </view>

    <!-- 内容区域 -->
    <scroll-view
      class="content-area"
      scroll-y
      @scrolltolower="loadMore"
      @refresherrefresh="refresh"
      :refresher-enabled="true"
      :refresher-triggered="isRefreshing"
    >
      <!-- 加载提示 -->
      <view v-if="isLoading" class="loading-text">加载中...</view>
      <view v-else-if="isError" class="error-text">加载失败，请重试</view>
      <view v-else class="product-list">
        <view
          class="product-item"
          v-for="(item, index) in filteredProductList"
          :key="index"
          @click="goToDetail(item)"
        >
          <image :src="item.imageUrl || '/static/images/default-product.png'" class="product-image" mode="aspectFill" />
          <view class="product-info">
            <text class="product-title">{{ item.title }}</text>
            <text class="product-desc">{{ item.description }}</text>
            <text class="product-price">{{ item.price }}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>



<script>
export default {
  data() {
    return {
      bannerList: [
        { imageUrl: '/static/images/image1.jpg' },
        { imageUrl: '/static/images/image2.jpg' }
      ],
      productList: [], // 产品列表数据
      filteredProductList: [], // 过滤后的产品列表数据
      searchKeyword: '', // 搜索框绑定的关键词
      isRefreshing: false, // 刷新状态
      isLoading: false, // 加载状态
      isError: false, // 错误状态
    };
  },
  methods: {
    // 轮播图点击事件
    handleBannerClick(item) {
      console.log('轮播图点击了:', item);
    },
    // 搜索框输入事件
    handleSearch() {
      if (this.searchKeyword) {
        this.filteredProductList = this.productList.filter(product => 
          product.title.toLowerCase().includes(this.searchKeyword.toLowerCase())
        );
      } else {
        this.filteredProductList = this.productList;
      }
    },
    // 清除搜索框
    clearSearch() {
      this.searchKeyword = '';
      this.filteredProductList = this.productList;
    },
    // 加载更多产品
    loadMore() {
      console.log('加载更多产品');
      // 在这里实现加载更多逻辑
    },
    // 刷新产品列表
    refresh() {
      console.log('刷新产品列表');
      this.isRefreshing = true;
      this.fetchProductList(); // 重新获取数据
      setTimeout(() => {
        this.isRefreshing = false;
      }, 1000);
    },
    // 跳转到产品详情页
    goToDetail(item) {
      console.log('跳转到详情页:', item);
      // 在这里实现跳转到产品详情页的逻辑
    },
    // 获取产品列表数据
    fetchProductList() {
      this.isLoading = true;
      this.isError = false;
      uni.request({
        url: 'http://127.0.0.1:1002/mesProduct/findProductList', // 后台接口地址
        method: 'GET', // 请求方法
        success: (res) => {
          console.log('接口返回数据:', res.data);
          if (res.data.code === 200) {
            this.productList = res.data.data.map(item => ({
              imageUrl: item.imageUrl || '/static/images/default-product.png', // 使用默认图片
              title: item.productName,
              description: item.specification + ' | ' + item.categoryName,
              price: '' + item.price,
              productId: item.id
            }));
            this.filteredProductList = this.productList; // 初始化过滤后的产品列表
          } else {
            this.isError = true;
          }
        },
        fail: (err) => {
          console.error('请求失败:', err);
          this.isError = true;
        },
        complete: () => {
          this.isLoading = false;
        }
      });
    }
  },
  onLoad() {
    console.log('页面加载完成!');
    this.fetchProductList(); // 页面加载时获取产品数据
  }
};
</script>


<style>
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #f8f8f8;
    padding: 20rpx;
  }

  .swiper {
    width: 100%;
    height: 400rpx;  /* 调整轮播图的高度 */
    border-radius: 20rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
    margin-bottom: 20rpx;
  }

  .swiper-image {
    width: 100%;
    height: 100%;
    border-radius: 20rpx;
    object-fit: cover;
  }

  .search-box {
    display: flex;
    align-items: center;
    padding: 20rpx 20rpx;  /* 增加内边距 */
    width: 95%;  /* 增加宽度 */
    background-color: #ffffff;
    border-radius: 40rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
    margin-bottom: 20rpx;
    height: 100rpx;  /* 增加搜索框的高度 */
  }

  .search-icon {
    margin-right: 20rpx;  /* 增加右边距 */
    color: #999999;
    font-size: 24rpx;  /* 增加图标的大小 */
  }

  .search-input {
    flex: 1;
    padding: 10rpx 20rpx;  /* 增加内边距 */
    border: none;
    border-radius: 40rpx;
    font-size: 16px;  /* 调整字体大小 */
    color: #333;
    outline: none;
    background-color: transparent; /* 确保背景透明 */
    height: 100%;  /* 使输入框高度占满搜索框 */
  }

  .clear-icon {
    margin-left: 20rpx;  /* 增加左边距 */
    color: #999999;
    font-size: 24rpx;  /* 增加图标的大小 */
  }

  .product-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 20rpx;
  }

  .product-item {
    width: 48%;
    margin-bottom: 20rpx;
    background-color: #ffffff;
    border-radius: 20rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
    height: 450rpx;  /* 减少产品项的高度 */
  }

  .product-item:hover {
    transform: translateY(-5rpx);
  }

  .product-image {
    width: 100%;
    height: 250rpx;  /* 减少图片的高度 */
    object-fit: cover;
    border-radius: 20rpx 20rpx 0 0;
  }

  .product-info {
    padding: 20rpx;
    text-align: left;
    height: 200rpx;  /* 减少信息区域的高度 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .product-title {
    font-size: 16px;  /* 减少标题的字体大小 */
    font-weight: bold;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .product-desc {
    font-size: 14px;
    color: #666;
    margin-top: 10rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .product-price {
    font-size: 16px;
    color: #ff4d4f;
    font-weight: bold;
    margin-top: 10rpx;
  }

  .loading-text,
  .error-text {
    text-align: center;
    padding: 20rpx;
    font-size: 14px;
    color: #666;
  }

  .error-text {
    color: #ff4d4f;
  }
</style>




